<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .marsBlackPanel {
        width: 387px;
        height: 200px;
        background-color: rgba(0, 0, 0, .7);
        border-radius: 20px;
        display: flex;
        color: #fff;
        flex-direction: column;
        padding: 10px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .marsBlackPanel:hover {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 2px 4px 1px rgba(0, 0, 0, .09);
        height:  calc-size(auto);
        transition: all 2s ease; 
    }

    .marsBlackPanel_innerbox {
        width: 100%;
        /* height: 40px; */
        display: flex;
        /* align-items: center; */
        justify-content: space-around;
    }

    .marsBlackPanel_top {
        display: flex;
        align-items: center;
        width: 45%;
        justify-content: space-around;
    }

    .marsBlackPanel_top_text {
        border: 1px solid #fff;
        height: 15px;
        font-size: small;
        padding: 2px 5px 2px 5px;
        background-color: #FAC858;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;


    }

    .marsBlackPanel-text {
        width: 220px;
        /* height: ; */
    }

    .marsBlackPanel_innerbox {
        /* width: 80%; */
        margin-top: 10px;
    }

    .text_top {
        width: 5px;
        height: 10px;
        background-color: #fff;
    }

    #marsBlackPanel-btn {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0 10px 2px 10px;
        border-radius: 50%;
        background-color: #fff;
        color: #000;
        /* text-align: center; */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

    }
</style>

<body>
    <div class="marsBlackPanel">
        <div class="marsBlackPanel_top">
            <div class="text_top"></div>
            <div>标题</div>
            <div class="marsBlackPanel_top_text">有更新意愿或计划</div>
        </div>
        <div class="marsBlackPanel_innerbox">
            <div>单元名称 </div>
            <div class="marsBlackPanel-text">3242</div>
        </div>
        <div class="marsBlackPanel_innerbox">
            <div>单元名称 </div>
            <div class="marsBlackPanel-text">3242</div>
        </div>
        <div class="marsBlackPanel_innerbox">
            <div>单元名称 </div>
            <div class="marsBlackPanel-text">3242</div>
        </div>
        <div class="marsBlackPanel_innerbox">
            <div>单元名称 </div>
            <div class="marsBlackPanel-text">单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称单元名称
            </div>
        </div>
        <div id="marsBlackPanel-btn">x</div>
    </div>
    <script>
        console.log(document.getElementById("marsBlackPanel-btn"));
        let marsBlackPanel_btn = document.getElementById("marsBlackPanel-btn")
        marsBlackPanel_btn.addEventListener("click", (e) => {
            console.log("w", e.target.style.display, document.getElementsByClassName("marsBlackPanel")[0].style.display);
            document.getElementsByClassName("marsBlackPanel")[0].style.display = "none"

        })

    </script>
</body>

</html>